<template>
  <view class="container">
    <!-- 顶部状态提示 -->
    <view class="status-bar">
      <!-- <view class="status-icon">
        <text class="iconfont icon-success">&#xe645;</text>
      </view> -->
	  <image class="icon-item" src="/static/success.png" mode="aspectFit"></image>
      <view class="status-text">
        <text class="title">提交成功</text>
        <text class="subtitle">您已成功提交信息</text>
      </view>
    </view>
    
    <!-- 用户信息卡片 -->
    <view class="user-info-card">
      <view class="avatar-container">
        <!-- <image class="avatar" src="@/static/images/default-avatar.png"></image> -->
      </view>
      <view class="user-info">
        <text class="username">用户名: {{userInfo.username}}</text>
        <text class="phone">手机号: {{userInfo.phone}}</text>
      </view>
    </view>
    
    <!-- 成功提示信息 -->
    <view class="success-message">
      <text class="message">恭喜您提交成功！您的老师稍后将会为您更新信息。</text>
      <text class="tips">请注意查收。</text>
    </view>
    
    <!-- 按钮区域 -->
    <view class="button-group">
      <button class="btn-home" @click="backToHome">
        <text class="btn-text">返回主页</text>
      </button>
      <button class="btn-modify" @click="backToModify">
        <text class="btn-text">返回修改</text>
      </button>
    </view>
    
    <!-- 底部版权信息 -->
    <view class="copyright">
      <text class="copyright-text">© 2025 公司名称 版权所有</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        username: '游客8765',
        phone: '138****1234'
      }
    }
  },
  onLoad(options) {
    // 接收注册页面传递过来的用户信息
    if (options.username) {
      this.userInfo.username = options.username;
    }
    if (options.phone) {
      this.userInfo.phone = options.phone;
    }
  },
  methods: {
    // 返回首页方法
    backToHome() {
      // 添加按钮点击动画
      this.$u.toast('返回首页');
      
      // 跳转到首页，关闭所有其他页面
      uni.reLaunch({
        url: '/pages/index/index'
      });
    },
    
    // 返回修改方法
    backToModify() {
      // 添加按钮点击动画
      this.$u.toast('返回修改');
      
      // 返回上一页
      uni.navigateBack({
        delta: 1
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 30rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
  
  // 状态提示样式
  .status-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 80rpx;
    
    .status-icon {
      width: 140rpx;
      height: 140rpx;
      border-radius: 50%;
      background-color: #52c41a;
      display: flex;
      justify-content: center;
      align-items: center;
      
      .iconfont {
        font-size: 80rpx;
        color: #fff;
      }
    }
    
    .status-text {
      margin-top: 30rpx;
      text-align: center;
      
      .title {
        font-size: 48rpx;
        font-weight: bold;
        color: #333;
      }
      
      .subtitle {
        font-size: 32rpx;
        color: #666;
        margin-top: 10rpx;
      }
    }
  }
  
  // 用户信息卡片样式
  .user-info-card {
    width: 90%;
    background-color: #fff;
    border-radius: 16rpx;
    margin-top: 60rpx;
    padding: 40rpx 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    
    .avatar-container {
      display: flex;
      justify-content: center;
      margin-bottom: 30rpx;
      
      .avatar {
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
        border: 2rpx solid #eee;
      }
    }
    
    .user-info {
      .username, .phone {
        display: block;
        font-size: 32rpx;
        color: #333;
        margin-bottom: 20rpx;
        text-align: center;
      }
      
      .phone {
        color: #666;
      }
    }
  }
  .icon-item {
    width: 40px;
    height: 40px;
    margin-bottom: 5px;
  }
  
  // 成功提示信息样式
  .success-message {
    width: 90%;
    margin-top: 60rpx;
    text-align: center;
    
    .message {
      font-size: 34rpx;
      color: #333;
      line-height: 1.5;
    }
    
    .tips {
      font-size: 30rpx;
      color: #666;
      margin-top: 20rpx;
    }
  }
  
  // 按钮区域样式
  .button-group {
    width: 90%;
    margin-top: 80rpx;
    display: flex;
    flex-direction: column;
    gap: 30rpx;
    
    .btn-home, .btn-modify {
      height: 96rpx;
      border-radius: 48rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 36rpx;
      font-weight: 500;
      transition: all 0.3s;
    }
    
    .btn-home {
      background-color: #1890ff;
      color: #fff;
      
      &:active {
        background-color: #096dd9;
      }
    }
    
    .btn-modify {
      background-color: #fff;
      color: #1890ff;
      border: 2rpx solid #1890ff;
      
      &:active {
        background-color: #e6f7ff;
      }
    }
    
    .btn-text {
      letter-spacing: 2rpx;
    }
  }
  
  // 底部版权信息样式
  .copyright {
    margin-top: auto;
    padding: 40rpx 0;
    
    .copyright-text {
      font-size: 26rpx;
      color: #999;
    }
  }
}
</style>    